<template>
  <p-modal
    title="SOP封面制作"
    v-model="visible"
    :width="600"
    :mask-closable="false"
  >
    <p-form-model
      ref="form"
      :model="model"
      :rules="rules"
      :label-col="{span: 5}"
      :wrapper-col="{span: 17}"
    >
      <p-form-model-item prop="sendCom" label="发文单位">
        <j-dict-select-tag
          v-model="model.sendCom"
          dict-code="dispatch_company"
        />
      </p-form-model-item>
      <p-form-model-item prop="useCom" label="使用单位">
        <j-dict-select-tag
          v-model="model.useCom"
          dict-code="used_company"
        />
      </p-form-model-item>
      <p-form-model-item prop="productCode" label="产品编码">
        <p-input :value="model.productCode" disabled />
      </p-form-model-item>
      <p-form-model-item prop="productName" label="产品名称">
        <p-input :value="model.productName" disabled />
      </p-form-model-item>
      <p-form-model-item prop="productSpec" label="产品描述">
        <p-input :value="model.productSpec" disabled />
      </p-form-model-item>
      <p-form-model-item prop="preparedBy" label="编制人">
        <p-input v-model.trim="model.preparedBy" :max-length="50" />
      </p-form-model-item>
      <p-form-model-item prop="approvedBy" label="审批人">
        <p-input v-model.trim="model.approvedBy" :max-length="50" />
      </p-form-model-item>
      <p-form-model-item prop="designFileCode" label="设计文件编号">
        <p-input v-model.trim="model.designFileCode" :max-length="100" />
      </p-form-model-item>
      <p-form-model-item prop="routeCode" label="文件编号">
        <p-input :value="model.routeCode" disabled />
      </p-form-model-item>
      <p-form-model-item prop="version" label="文件版本">
        <p-input :value="model.version" disabled />
      </p-form-model-item>
    </p-form-model>
    <template slot="footer">
      <p-button @click="onCancel">取消</p-button>
      <p-button type="primary" @click="onPreview">预览</p-button>
      <p-button type="primary" @click="onOk">确定</p-button>
    </template>

    <p-modal
      v-model="viewVisible"
      :width="834"
      :closable="false"
      :mask-closable="false"
      :body-style="bodyStyle"
    >
      <preview :options="previewData" />
      <template slot="footer">
        <p-button type="primary" @click="setViewVisible(false)">关闭</p-button>
      </template>
    </p-modal>
  </p-modal>
</template>

<script>
import { getAction, putAction } from '@/api/manage'
import Preview from './preview'
import JDictSelectTag from "@/components/dict/JDictSelectTag";

export default {
  components: {
    Preview,
    JDictSelectTag
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      loading: false,
      visible: false,
      model: {
        approvedBy: '',
        designFileCode: '',
        preparedBy: '',
        productCode: '',
        productSpec: '',
        routeCode: '',
        sendCom: '',
        sopCoverUrl: '',
        useCom: '',
        version: '',
        productName: ''
      },
      previewData: null,
      rules: {
        approvedBy: {
          required: true,
          message: '请输入审批人'
        },
        designFileCode: {
          required: true,
          message: '请输入设计文件编号'
        },
        preparedBy: {
          required: true,
          message: '请输入编制人'
        },
        sendCom: {
          required: true,
          message: '请选择发文单位'
        },
        useCom: {
          required: true,
          message: '请选择使用单位'
        }
      },
      bodyStyle: {
        backgroundColor: '#dadce0',
        height: '600px',
        overflowX: 'hidden',
        overflowY: 'auto'
      },
      viewVisible: false
    }
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.initValue();
  },
  methods: {
    initValue() {
      this.visible = this.value
      if (this.value) {
        this.model = this.options;
      }
    },
    onCancel() {
      this.visible = false
      this.$refs.form.resetFields()
    },
    onOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('callback', Object.assign({}, this.model), 'sopCover')
          this.onCancel()
        }
      })
    },
    onPreview() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.setViewVisible(true)
        }
      })
    },
    setViewVisible(visible) {
      this.viewVisible = visible
      if (visible) {
        this.previewData = Object.assign({}, this.model)
      }
    }
  }
}
</script>
